<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>圣杯布局</h1>
    <p>圣杯布局左中右三列布局，渲染顺序中间列书写在前保证提前渲染，左右两列定宽，中间列自适应剩余宽度。
圣杯布局与双飞翼布局的不同之处，圣杯布局的的左中右三列容器没有多余子容器存在，通过控制父元素的 padding 空出左右两列的宽度。</p>
    
    <!-- float方式 -->
    <style>
        .container{
            overflow: hidden;
            padding:0 100px;
        }


       
        .container .main{
            width: 100%;
            float: left;
            background: #ffcc00;
        }

        .container .left{
            width: 100px;
            float: left;
            background-color: tomato;
            /*可以通过上下左右，根据父级调整自身位置*/
           position: relative;
            /* 往左跑100%，因为float所以会跑到父级起始位 */
            margin-left: -100%;
            left:-100px;
        }
        .container .right{
            width: 100px;
            float: left;

            background-color: tomato;
            margin-right: -100%;
            background: #4e59d6;
            
        }
        
    </style>
    <h2>float方式</h2>
    <div class="container">
        <div class="main">main</div>
        <div class="left">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum labore, ut ducimus repudiandae corporis fuga nihil, animi perferendis, accusantium quae omnis ipsam reprehenderit. Neque molestias corrupti sit incidunt cum officia!</div>
        <div class="right">right</div>
    </div>

       <!-- flex方式 -->
       <style>
        .flex-container{
            display: flex;
            height: 100px;
        }
        .flex-container .left,.flex-container .main,.flex-container .right{
            background-color: turquoise;
            margin-right: 5px;
        }
        .flex-container .left,.flex-container .right{
            /* width: 200px; */
            /* 默认100px 不可以放大缩小 */
            flex: 0 0 100px;

        }
        .flex-container .left{
            order: 1;
        }
        .flex-container .right{
            order: 3;
        }
        .flex-container .main{
             /* 默认100px 可大可缩 */
            flex:1 1 100px;
            order:2
            /* width: calc(100% - 415px); */
        }
    </style>
    <h2>flex方式</h2>
    <div class="flex-container">
        <div class="main">main</div>
        <div class="left">left </div>
        <div class="right">right</div>
    </div>

       <!-- grid方式 -->
       <style>
        .grid-container{
            display: grid;
            height: 100px;
            grid: auto-flow / 100px 1fr 100px;
            grid-gap:5px
        }
        .grid-container .left,.grid-container .main,.grid-container .right{
            background-color: tomato; 
        }
   
    </style>


    <h2>grid方式</h2>
    <div class="grid-container">
        <div class="main">main</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>